<div class="qmquery">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>多媒体统计表</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="ui-g">
            <!-- 左侧 -->
            <div class="ui-g-4 media_item">
                <!-- 顶部搜索 -->
                <div class="ui-g">
                    <div class="ui-g-5">
                        <!-- 型号 -->
                        <span style="margin-right:5px;">型号：</span>
                        <p-dropdown [options]="Models" [(ngModel)]="modelValue" name="model" filter="true"
                            placeholder="请选择型号" emptyFilterMessage="暂无数据" (onChange)="onChange($event)">
                            <ng-template let-item pTemplate="selectedItem">
                                <span style="vertical-align:middle; margin-left: .3em">{{item.label}}</span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px">{{model.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </div>
                    <div class="ui-g-5">
                        <!-- 发次 -->
                        <span style="margin-right: 5px;">发次：</span>
                        <p-dropdown [options]="LotNoList" [(ngModel)]="lotNo" filter="true" placeholder="请选择发次"
                            emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span style="vertical-align:middle; margin-left: .3em">{{item.label}}</span>
                            </ng-template>
                            <ng-template let-fc pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px">{{fc.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </div>
                    <!-- 搜索 -->
                    <div class="ui-g-2">
                        <p-button label="搜索" (onClick)="treeSearch()"></p-button>
                    </div>
                </div>
                <!-- 树型结构 -->
                <div>
                    <p-tree [value]="treeData" selectionMode="single" [(selection)]="selectedFiles"
                        (onNodeSelect)="nodeSelect($event)" [style]="{ height: '670px' }" [loading]="loadingtree">
                        <ng-template let-node pTemplate="default">
                            <img class="imgcontent"
                                [src]="(node.nodeLevel==8||node.nodeLevel==9)?'../../../assets/common/images/三级图标.png':node.isLeaf==1?'../../../assets/common/images/二级图标.png':'../../../assets/common/images/一级图标.png'"
                                width="20" height="20" />
                            <span
                                *ngIf="node.key==-1">{{node.model}}-{{node.lotNo}}-{{node.nodeDrawingNo}}-{{node.nodeName}}-{{node.stageSign}}</span>
                            <span *ngIf="node.key!=-1">{{node.nodeDrawingNo}}-{{node.nodeName}}</span>
                            <span class="ptagisExport" *ngIf="node.isReturn==1">{{node.isReturn==1?'已回传':''}}</span>
                        </ng-template>
                    </p-tree>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="ui-g-7 media_item">
                <!-- 顶部搜查 -->
                <div class="ui-g">
                    <!-- 对比发次 -->
                    <div class="ui-g-4" style="display: flex;">
                        <div style="margin-right: 5px;margin-top: 10px;">对比发次：</div>
                        <p-multiSelect [options]="LotNoList" defaultLabel="请选择" [(ngModel)]="dblotNo"
                            [panelStyle]="{minWidth:'12em'}" name="dblotNo">
                        </p-multiSelect>
                    </div>
                    <!-- 项目 -->
                    <div class="ui-g-4">
                        <span style="margin-right: 5px;">项目：</span>
                        <p-dropdown [options]="projectList" [(ngModel)]="project" [showClear]="true" filter="true"
                            placeholder="请选择项目" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
                            </ng-template>
                            <ng-template let-fc pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px">{{fc.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </div>
                    <!-- 部位 -->
                    <div class="ui-g-4">
                        <span style="margin-right: 5px;">部位：</span>
                        <p-dropdown [options]="locationList" [(ngModel)]="location" [showClear]="true" filter="true"
                            placeholder="请选择部位" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
                            </ng-template>
                            <ng-template let-fc pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px">{{fc.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </div>
                </div>
                <!-- 日期范围选择 -->
                <div class="ui-g">
                    <div class="ui-g-4">
                        <span style="margin-right: 5px;">记录日期：</span>
                        <p-calendar [(ngModel)]="rangeDates" selectionMode="range" [showIcon]="true"
                            [readonlyInput]="true" dateFormat="yy-mm-dd" [locale]="chinese">
                        </p-calendar>
                    </div>
                    <div class="ui-g-6">
                        <p-button label="搜索" (onClick)="searchRight()" style="margin-right: 30px;"></p-button>
                        <p-button label="取消" (onClick)="resetSearchRight()"></p-button>
                    </div>
                </div>
                <!-- 表格 -->
                <div class="m-portlet__body ui-g-12" *ngIf="workStepData" style="height: 560px;">
                    <div class="primeng-datatable-container processlabel">
                        <p-table #dataTable [value]="workStepData" [paginator]="false" dataKey="id" [scrollable]="true"
                            ScrollWidth="100%">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th *ngFor="let headerItem of (workStepHeader&&workStepHeader.filedName?workStepHeader.filedName:[])"
                                        [ngStyle]="{'width': (headerItem=='照片（影像）编号' || headerItem=='记录人' || headerItem=='确认人') ?'350px':'102px','height':'130px'}">
                                        {{headerItem}}
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr>
                                    <td *ngFor="let headerprop of (workStepHeader&&workStepHeader.filedDesc?workStepHeader.filedDesc:[])"
                                        [ngStyle]="{'width': (headerprop=='photoNo'||headerprop=='firstOperator'||headerprop=='secondOperator') ?'350px':'102px','height':'130px'}">
                                        <ng-container [ngSwitch]="headerprop">
                                            <div *ngSwitchCase="'serialNum'">
                                                <span>
                                                    {{rowIndex+1}}
                                                </span>
                                            </div>
                                            <div *ngSwitchCase="'photoNo'">
                                                <div class="imgList">
                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                    </p-lightbox> -->
                                                    <a target="_blank" [href]="item.source" style="padding: 5px;"
                                                        *ngFor="let item of getImage(record[headerprop])">
                                                        <img [src]="item.source" height="30px" width="30px">
                                                    </a>
                                                    <a target="_blank" [href]="item.source" style="padding: 5px;"
                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div *ngSwitchCase="'secondPhotoNo'">
                                                <div class="imgList">
                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                    </p-lightbox> -->
                                                    <a target="_blank" [href]="item.source" style="padding: 5px;"
                                                        *ngFor="let item of getImage(record[headerprop])">
                                                        <img [src]="item.source" height="30px" width="30px">
                                                    </a>
                                                    <a target="_blank" [href]="item.source" style="padding: 5px;"
                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div *ngSwitchCase="'thirdPhotoNo'">
                                                <div class="imgList">
                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                    </p-lightbox> -->
                                                    <a target="_blank" [href]="item.source" style="padding: 5px;"
                                                        *ngFor="let item of getImage(record[headerprop])">
                                                        <img [src]="item.source" height="30px" width="30px">
                                                    </a>
                                                    <a target="_blank" [href]="item.source" style="padding: 5px;"
                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div *ngSwitchCase="'fourthPhotoNo'">
                                                <div class="imgList">
                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                    </p-lightbox> -->
                                                    <a target="_blank" [href]="item.source" style="padding: 5px;"
                                                        *ngFor="let item of getImage(record[headerprop])">
                                                        <img [src]="item.source" height="30px" width="30px">
                                                    </a>
                                                    <a target="_blank" [href]="item.source" style="padding: 5px;"
                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <!-- 操作人 1-5检 -->
                                            <div *ngSwitchCase="'route'">
                                                <span style="color: blue;cursor:pointer" (click)="showUrlInfo(record)">
                                                    {{record[headerprop]}}
                                                </span>
                                            </div>
                                            <div *ngSwitchCase="'firstOperator'">
                                                <div style="padding: 5px;"
                                                    *ngFor="let item of getUser(record[headerprop])">
                                                    <a target="_blank" [href]="item.url"
                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                </div>
                                            </div>
                                            <div *ngSwitchCase="'secondOperator'">
                                                <div style="padding: 5px;"
                                                    *ngFor="let item of getUser(record[headerprop])">
                                                    <a target="_blank" [href]="item.url"
                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                </div>
                                            </div>
                                            <div *ngSwitchCase="'thirdOperator'">
                                                <div style="padding: 5px;"
                                                    *ngFor="let item of getUser(record[headerprop])">
                                                    <a target="_blank" [href]="item.url"
                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                </div>
                                            </div>
                                            <div *ngSwitchCase="'fourthOperator'">
                                                <div style="padding: 5px;"
                                                    *ngFor="let item of getUser(record[headerprop])">
                                                    <a target="_blank" [href]="item.url"
                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                </div>
                                            </div>
                                            <div *ngSwitchCase="'fifthOperator'">
                                                <div style="padding: 5px;"
                                                    *ngFor="let item of getUser(record[headerprop])">
                                                    <a target="_blank" [href]="item.url"
                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                </div>
                                            </div>
                                            <div *ngSwitchDefault>
                                                {{record[headerprop]}}
                                            </div>
                                        </ng-container>
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator rows="5" #paginator (onPageChange)="searchRight()"
                                [totalRecords]="workStepHeader.totalCount" [rowsPerPageOptions]="[5,10,20]">

                            </p-paginator>
                            <span class="total-records-count">
                                总计:{{workStepHeader?workStepHeader.totalCount:0}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>